<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <div class="tit">
        <h2>{{ dataForm.tagId ? "编辑标签" : "新增标签" }}</h2>
        <el-button
          type="success"
          plain
          size="small"
          icon="fa fa-mail-forward"
          @click="returnList"
          >返回</el-button
        >
      </div>
      <el-form
        :model="dataForm"
        ref="dataForm"
        label-width="200px"
        :rules="roleRules"
      >
        <el-row>
          <el-form-item prop="firstClassifyId" label="分类名">
            <!-- <el-input v-model.number="dataForm.firstClassifyId"></el-input> -->
            <!-- v-model="dataForm.firstClassifyId"
              :options="options"
              @change="handleChange" -->
            <el-cascader
              v-model="treeList"
              :props="propsTree"
              :options="classTreeList"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
          <el-form-item prop="tagName" label="标签名">
            <el-input v-model.number="dataForm.tagName"></el-input>
          </el-form-item>

          <el-form-item prop="tagImage" label="标签图">
            <upload-img
              class="upload-img"
              @uploadFileList="getImgUrl"
              folder="poster"
            >
              <img
                v-if="dataForm.tagImage"
                width="100%"
                :src="dataForm.tagImage"
                alt=""
              />
              <div class="tip" v-if="!dataForm.tagImage">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将图片拖到此处，或<em>点击上传</em>
                </div>
              </div>
            </upload-img>
          </el-form-item>

          <el-form-item prop="sort" label="排序">
            <el-input type="number" v-model.number="dataForm.sort"></el-input>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item>
            <el-button plain type="primary" @click="sureClick">保 存</el-button>
            <el-button plain @click="returnList">取 消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import * as message from "@/constants/message";
import UploadImg from "@/components/UploadImg";
import TagRuleApi from "@/api/operation/tagModel";
export default {
  name:'TagAdd',
  data() {
    return {
      propsTree: {
        label: "name",
        value: "id"
      },
      classTreeList: [],
      treeList: [],
      dataForm: {
        tagId:'',
        sort: "",
        tagImage: "",
        firstClassifyId: "",
        firstClassifyName: "",
        secondClassifyId: "",
        secondClassifyName: "",
        thirdClassifyId: "",
        thirdClassifyName: "",
        tagName: ""
      },
      departList: [],
      loadingIns: false,
      roleRules: {
        tagName: [{ required: true, message: "请输入分类名", trigger: "blur" }],
        /*tagImage: [
          { required: true, message: "请上传分类图", trigger: "change" }
        ]*/
      }

      // sysDepartList:[],
    };
  },
  components: {
    UploadImg
  },
  mounted() {
    this.init();
  },
  methods: {
    handleChange(e) {
      console.log(e);
      let [firstClassifyId, secondClassifyId, thirdClassifyId] = e;

      let list = this.$Utils.filterTreeToArr(
        this.classTreeList,
        { id: thirdClassifyId || secondClassifyId || firstClassifyId },
        "id"
      );
      let [obj1, obj2, obj3] = list;
      this.dataForm.firstClassifyId = obj1.id || "";
      this.dataForm.firstClassifyName = obj1.name || "";
      this.dataForm.secondClassifyId = obj2.id || "";
      this.dataForm.secondClassifyName = obj2.name || "";
      this.dataForm.thirdClassifyId = obj3.id || "";
      this.dataForm.thirdClassifyName = obj3.name || "";
    },
    init() {
      if (this.$route.query.id) {
        this.dataForm.tagId = this.$route.query.id;
        this.getData();

      }

      TagRuleApi.classifyTree().then(res => {
        this.classTreeList = res.data;
      });
    },
    keydown(e) {
      if (e.keyCode == 32) {
        e.returnValue = false;
      }
    },
    getData() {
      TagRuleApi.tagInfoInfo({
        id: this.dataForm.tagId
      }).then(res => {
        this.$Utils.bindingBean(this.dataForm, res.data);

        const data = res.data
        const departIds = []
        data.firstClassifyId ? departIds.push(data.firstClassifyId) : ''
        data.secondClassifyId ? departIds.push(data.secondClassifyId) : ''
        data.thirdClassifyId ? departIds.push(data.thirdClassifyId) : ''
        this.treeList = departIds
      });
    },
    getImgUrl(val) {
      if (val.length > 0) {
        this.dataForm.tagImage = val[0];
      }
    },
    sureClick() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm(
            message.MSG_CONFIRM_SAVE_ALTER,
            message.TITLE_PROMPT,
            {}
          ).then(() => {
            if (this.dataForm.tagId) {
              this.editData();
            } else {
              this.addData();
            }
          });
        }
      });
    },
    addData() {
      let param = JSON.parse(JSON.stringify(this.dataForm));
      TagRuleApi.tagInfoPageCreate(param).then(res => {
        this.$Utils.notifySuccess();
        this.returnList();
      });
    },
    editData() {
      let param = JSON.parse(JSON.stringify(this.dataForm));
      TagRuleApi.tagInfoPageEdit(param).then(() => {
        this.$Utils.notifySuccess();
        this.returnList();
      });
    },
    returnList() {
      this.$store.dispatch("delView", this.$route);
      this.$router.push({
        path: "/operation/tagList"
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
<style lang="scss" scoped>
.upload-img {
  &::v-deep .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .tip {
        padding-bottom: 30px;
      }
    }
  }
}
.preview {
  width: 100%;
  min-height: 300px;
  border: 1px solid black;
  .content {
  }
}
</style>
